import { View, Text, ScrollView } from 'react-native'
import React, { useEffect, useState } from 'react'
import { Stack, useLocalSearchParams, useRouter, useSearchParams } from 'expo-router'
import { base, mallGoodsDetails } from '../../service'
import { Image } from 'react-native'
import { useWindowDimensions } from 'react-native'
import { StyleSheet } from 'react-native'
import { zhBorderColor, zhBorderRadius, zhBorderWidth, zhSpacingColBase, zhSpacingColLg, zhSpacingColSm, zhSpacingRowBase, zhSpacingRowLg, zhThemeColor } from '../../global'
import { TouchableOpacity } from 'react-native'
//内容无法撑起自身高度的WebView，要靠父容器留给自己空白空间
//import { WebView } from 'react-native-webview'
//内容自动撑起自身高度的WebView
import AutoHeightWebView from 'react-native-autoheight-webview'

export default function Detail() {
  //获得当前手机屏幕的尺寸
  let { width } = useWindowDimensions()
  //状态数据 —— 查询到的商品信息
  let [goods, setGoods] = useState({})
  //获取路由器对象
  let router = useRouter()
  //读取路由参数
  let { gid } = useSearchParams()  //返回值比较多
  //let {gid} = useLocalSearchParams()  //返回值只包含路由参数

  //组件挂载时，处理路由参数
  useEffect(() => {
    //1.读取上个页面传递来的路由参数gid，如果没有的话则跳转回列表页
    if (!gid) {
      router.replace('/mall/list')
      return
    }
    //2.根据此gid异步查询服务器端接口数据，获得商品详情
    ; (async () => {
      let data = await mallGoodsDetails(gid)
      //处理服务器端返回的数据1：把所有的 src="img 替换为 src="${base}img
      data.details = data.details.replace(/src="img/g, `src="${base}img`)
      //处理服务器端返回的数据2：把所有的 <img 替换为 <img style="width:100%"
      data.details = data.details.replace(/<img/g, '<img style="width:100%"')
      setGoods(data)
    })()
  }, [])
  return (
    <ScrollView style={{height: '100%'}}>
      {/* F0: 动态修改：标题栏中的内容 —— 此处的设置会覆盖_layout.js中的设置  */}
      <Stack.Screen options={{title: goods.shortTitle}}/>
      {/* F1: 顶部的banner图片 */}
      <Image style={{ width, height: width }} source={{ uri: base + goods.mainPic }} />
      {/* F2: 主标题 */}
      <Text style={ss.title}>{goods.goodsName}</Text>
      {/* F3: 副标题 */}
      <Text style={ss.subTitle}>{goods.descriptions}</Text>
      {/* F4: 原价 */}
      <Text style={ss.price}>价格：
        <Text style={{ textDecorationLine: goods.discount < 1 ? 'line-through' : 'none' }}>￥{goods.originalPrice}</Text>
      </Text>
      {/* F5: 折扣价 */}
      {goods.discount < 1 && (
        <Text style={ss.discountPrice}>促销价格：
          <Text style={{ color: '#f00' }}>￥{goods.originalPrice * goods.discount}</Text>
        </Text>
      )}
      {/* F6: 两个按钮 */}
      <View style={ss.f6}>
        <TouchableOpacity activeOpacity={0.5}>
          <Text style={ss.buy}>立即购买</Text>
        </TouchableOpacity>
        <TouchableOpacity activeOpacity={0.5}>
          <Text style={ss.add}>添加到购物车</Text>
        </TouchableOpacity>
      </View>
      {/* F7: 商品详情标题字 */}
      <Text style={ss.f7}>商品详情：</Text>
      {/* F8: 商品详细介绍 */}
      <AutoHeightWebView source={{html: goods.details}}/>
    </ScrollView>
  )
}

let ss = StyleSheet.create({
  title: {
    fontSize: 15, //字体大小
    marginVertical: zhSpacingColLg, //竖直方向上的外间距
    paddingHorizontal: zhSpacingRowLg, //水平方向内边距
  },
  subTitle: {
    fontSize: 13, //字体大小
    color: '#777',  //文字颜色
    paddingHorizontal: zhSpacingRowLg, //水平方向内边距
  },
  price: {
    paddingHorizontal: zhSpacingRowLg, //水平方向内边距
    marginTop: zhSpacingColLg, //上外间距
  },
  discountPrice: {
    paddingHorizontal: zhSpacingRowLg, //水平方向内边距
    marginTop: zhSpacingColSm, //上外间距
  },
  f6: {
    paddingHorizontal: zhSpacingRowLg, //水平方向内边距
    marginVertical: zhSpacingColLg, //竖直方向上的外间距
    flexDirection: 'row', //弹性容器主轴方向：横向
  },
  buy: {
    borderColor: zhThemeColor, //边框
    borderWidth: zhBorderWidth,
    borderRadius: zhBorderRadius,
    backgroundColor: '#cfc', //背景
    color: zhThemeColor,//文字
    paddingHorizontal: zhSpacingRowLg*2,  //水平内边距
    paddingVertical: zhSpacingColBase,  //竖直内边距
    marginRight: zhSpacingRowLg, //右外间距
  },
  add: {
    borderColor: zhThemeColor, //边框
    borderWidth: zhBorderWidth,
    borderRadius: zhBorderRadius,
    backgroundColor: zhThemeColor, //背景
    color: '#fff',//文字
    paddingHorizontal: zhSpacingRowLg*2,  //水平内边距
    paddingVertical: zhSpacingColBase,  //竖直内边距
  },
  f7: {
    fontSize: 15, //文字大小
    color: '#777',//文字颜色
    padding: zhSpacingRowBase, //内边距
    marginVertical: zhSpacingColBase, //竖直方向上的外间距
    borderBottomColor: zhBorderColor, //下边框
    borderBottomWidth: zhBorderWidth
  },
})